<template>
  <div class="column" v-cloak>
    <div class="header-text">
      <span>您当前的位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '#' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '#' }">栏目设置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '#' }">新增栏目</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contanter">
      <div class="table-title">
        <span>新增栏目</span>
      </div>
      <div class="heaer-list">
        <el-form label-width="80px" :model="date">
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="基本信息" name="first" class="tag-table">
              <el-form-item label="栏目名称">
                <el-input v-model="date.colName"></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="date.name"></el-input>
              </el-form-item>
              <el-form-item label="所属栏目">
                <el-select placeholder="选择栏目" v-model="date.Moudel" icon="el-icon-caret-bottom">
                  <el-option
                    v-for="(item,index) in colName"
                    :key="index"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="排序">
                <el-input v-model="date.sort"></el-input>
              </el-form-item>
              <el-form-item label="栏目照片">
                <div class="col-img">
                  <el-input v-model="date.img"></el-input>
                  <el-button type="primary" @click="newColumn">选择站内图片</el-button>
                  <el-button>
                    <i class="el-icon-circle-plus-outline"></i> 上传图片
                  </el-button>
                </div>
              </el-form-item>
              <div class="title_bar">
                <el-form-item label="栏目照片"></el-form-item>
              </div>

              <el-form-item label="模板类型">
                <el-select placeholder="选择模型" v-model="date.mobanModel" icon="el-icon-caret-bottom">
                  <template></template>
                  <el-option
                    v-for="(item,index) in mbleix"
                    :key="index"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="封面页模板">
                <el-select
                  placeholder="选择模板"
                  v-model="date.fenmianModel"
                  icon="el-icon-caret-bottom"
                >
                  <el-option
                    v-for="(item,index) in fenmianModel"
                    :key="index"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="列表页模板">
                <el-select
                  placeholder="选择模板"
                  v-model="date.liebiaoModel"
                  icon="el-icon-caret-bottom"
                >
                  <el-option
                    v-for="(item,index) in liebiaoModel"
                    :key="index"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="内容页模板">
                <el-select
                  placeholder="选择模板"
                  v-model="date.neirongModel"
                  icon="el-icon-caret-bottom"
                >
                  <el-option
                    v-for="(item,index) in neirongModel"
                    :key="index"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <div class="title_bar">
                <el-form-item label="内容设置"></el-form-item>
              </div>
              <el-form-item label="栏目介绍">
                <div id="set-contect"></div>
              </el-form-item>
              <el-form-item label="栏目内容">
                <div id="set-contect2"></div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="newColumn">提交</el-button>
              </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="SEO设置" name="second">
              <el-form-item width="700" label="SEO标题">
                <el-input v-model="date.seo.title" width="700" placeholder="SEO标题"></el-input>
              </el-form-item>
              <el-form-item width="700" label="SEO关键词" placeholder="SEO关键词">
                <el-input v-model="date.seo.desc"></el-input>
              </el-form-item>
              <el-form-item width="700" label="SEO描述">
                <el-input
                  type="textarea"
                  :rows="2"
                  width="700"
                  placeholder="请输入内容"
                  v-model="date.seo.textarea"
                ></el-input>
              </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="其他设置" name="third">
              <el-form-item width="700" label="栏目属性">
                <el-radio v-model="date.colsx.shuxing" label="true">列表（允许发表文档）</el-radio>
                <el-radio v-model="date.colsx.shuxing" label="false">频道（不允许发表文档）</el-radio>
              </el-form-item>
              <el-form-item width="700" label="外部链接" placeholder="外部链接">
                <el-input v-model="date.colsx.targert">
                  <span>内部链接可使用“@其他栏目ID”的方式进行内链，外链填写完整URL“http://~~”</span>
                </el-input>
              </el-form-item>
              <el-form-item width="700" label="栏目别名" placeholder="栏目别名">
                <el-input v-model="date.colsx.name">
                  <span>
                    栏目集权 [
                    <a href>使用说明</a> ]
                  </span>
                </el-input>
              </el-form-item>
              <el-form-item width="700" label="是否显示">
                <el-switch v-model="date.colsx.isshow"></el-switch>
              </el-form-item>
              <el-form-item width="700" label="导航栏显示">
                <el-radio v-model="date.colsx.navposition" label="不显示">不显示</el-radio>
                <el-radio v-model="date.colsx.navposition" label="主导航栏">主导航栏</el-radio>
                <el-radio v-model="date.colsx.navposition" label="尾导航">尾导航</el-radio>
                <el-radio v-model="date.colsx.navposition" label="都显示">都显示</el-radio>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="newColumn">提交</el-button>
              </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="分站设置" name="fourth">
              <el-form-item width="700" label="开启地区分站">
                <el-switch v-model="date.fenzan.open"></el-switch>
                <span>如果关闭以下设置均不生效</span>
              </el-form-item>
              <el-form-item width="700" label="栏目显示地区名称">
                <el-switch v-model="date.fenzan.title"></el-switch>
                <span>开启后栏目名称会加上城市名称，操作后右上角更新缓存</span>
              </el-form-item>
              <el-form-item width="700" label="内容显示地区名称">
                <el-switch v-model="date.fenzan.content"></el-switch>
                <span>开启后内容标题会加上城市名称，操作后右上角更新缓存</span>
              </el-form-item>
              <el-form-item width="700" label="栏目URL同步主站">
                <el-switch v-model="date.fenzan.url"></el-switch>
                <span>开启后该栏目链接同步主站URL</span>
              </el-form-item>
              <el-form-item width="700" label="内容URL同步主站">
                <el-switch v-model="date.fenzan.curl"></el-switch>
                <span>开启后该栏目添加新内容时“附加设置”-“链接同步主站”默认状态为“开启”</span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="newColumn">提交</el-button>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
      <!-- 表格视图 -->
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
export default {
  data() {
    return {
      activeName: "first", //tabl页默认选择
      // 下拉菜单
      colName: [], //所属栏目
      mbleix: ["文章模型", "产品模型", "DIY产品", "图片模型", "单页模型"],
      fenmianModel: ["选择模板"],
      liebiaoModel: [
        "list_articl.html",
        "list_articl.html",
        "list_articl.html",
        "list_articl.html",
        "list_articl.html",
        "list_articl.html",
      ],
      neirongModel: [
        "list_articl.html",
        "list_articl.html",
        "list_articl.html",
        "list_articl.html",
        "list_articl.html",
        "list_articl.html",
      ],

      // 整个大的数据联系
      date: {
        id: "",
        colName: "",
        name: "",
        parentColNameID: "",
        Moudel: "",
        sort: "0",
        img: "",
        nav: "",
        mobanModel: "",
        fenmianModel: "",
        liebiaoModel: "",
        neirongModel: "",
        textDesc: "",
        textcontent: "",
        content: [
          {
            id: "",
            contentText: "",
            title: "",
            classify: "",
            watch: "",
            createTime: "",
            share: "",
            sort: "",
          },
        ],
        seo: {
          title: "",
          desc: "",
          textarea: "",
        },
        colsx: {
          shuxing: "",
          targert: "",
          name: "",
          isshow: "",
          new: "",
          navposition: "",
        },
        fenzan: {
          open: true,
          title: false,
          content: true,
          url: false,
          curl: false,
        },
      },
    };
  },
  created() {
    let moudel = this.$store.state.Column.column;
    moudel.forEach((item) => {
      this.colName.push(item.colName);
    });
  },
  mounted() {
    //栏目介绍
    const editor = new E("#set-contect");
    editor.create();
    editor.txt.html(this.date.textDesc);
    //栏目内容
    const text = new E("#set-contect2");
    text.create();
    editor.txt.html(this.date.textcontent);
  },
  methods: {
    // 新增一行数据
    newColumn() {
      let date = new Date();
      let time = date.getTime().toString();
      let id = time.substring(time.length - 5); //获取时间戳倒数5位数为id
      this.date.id = id;
      this.$store.commit("addColumnOne", this.date);
      this.date = {};
      this.$router.push({
        path: "/column",
      });
    },
  },
};
</script>

<style socped>
.heaer-list .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  border-radius: 0 !important;
}
.col-img .el-button {
  height: 40px;
}
.col-img .el-input {
  width: 300px;
  margin-right: 10px;
}
.col-img {
  display: flex;
}
#pane-first .el-select {
  width: 220px;
}
#pane-first .el-input {
  padding: 0;
  padding-left: 10px;
  width: 290px;
  margin-bottom: 10px;
}
#pane-first .el-form-item {
  /* height: 38px; */
  margin-bottom: 10px;
}
#pane-first input {
  padding: 0;
  padding-left: 10px;
  width: 290px;
}
.title_bar .el-form-item {
  margin-bottom: 0;
  height: 35px;
}
.title_bar .el-form-item .el-form-item__label {
  padding-left: 18px;
  height: 35px;
  width: 100% !important;
  text-align: left;
}
.title_bar {
  width: 100%;
  font-size: 14px;
  line-height: 1.4;
  background: #f5f6fa;
  border: 1px solid #e1e6eb;
  margin-bottom: 30px;
}
.heaer-list .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #000000;
  font-weight: 400;
  border-radius: 5px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  margin: 0;
}
.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #333333;
}
.heaer-list .el-tabs--border-card {
  border: none;
  box-shadow: none;
}
.heaer-list .el-tabs--border-card > .el-tabs__header {
  background-color: rgba(0, 0, 0, 0);
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  border-top-color: #dcdfe6;
}

[v-cloak] {
  display: none;
}
.make-date {
  justify-content: center;
  display: flex;
  width: 100%;
}

.make-date .el-button {
  height: 32px;
  padding: 0 10px;
  margin: 0;
  margin-left: 5px;
}
.make-date .el-button:first-child {
  margin: 0;
}
.make-date .el-button span {
  padding: 0;
}

.heaer-button .el-button:hover {
  background-color: #0099cc;
}
.heaer-button .el-button {
  background-color: #28b5d6;
  border-radius: 0;
}
.table-title span {
  display: block;
  line-height: 15px;
  padding-left: 15px;
  margin-left: 2px;
  border-left: 2px solid #88b7e0;
}
.table-title {
  display: flex;
  align-items: center;
  height: 45px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dddddd;
  line-height: 45px;
}
.contanter {
  padding: 15px 27px;
  margin: 30px;
  background-color: #fff;
}
.header-text {
  display: flex;
  height: 30px;
  line-height: 30px;
  padding-left: 25px;
  background-color: #fff;
  text-align: left;
}
.el-breadcrumb {
  line-height: 30px;
  height: 30px;
}
.column {
  background-color: #eaedf1;
  font-size: 14px;
  min-height: 100%;
  padding-bottom: 30px;
}
.heaer-list .el-tabs__content {
  overflow: none !important;
}
</style>